/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

//时间控件，官网：https://github.com/weifeiyue/vue-datepicker-local
import VueDatepickerLocal from 'vue-datepicker-local'

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        searchParams:{
            user_resource:0,
            start_time:'',
            end_time:'',
        },
        start_time:'',
        end_time:'',
        chartData:[],
        box:null,
    },
    watch:{
        start_time:function (val) {
            if (val){
                var d = new Date(val);
                let format = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                this.searchParams.start_time = format;
            } else{
                this.searchParams.start_time = '';
            }
        },
        end_time:function (val) {
            if (val){
                var d = new Date(val);
                let format = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                this.searchParams.end_time = format;
            } else{
                this.searchParams.end_time = '';
            }
        }
    },
    mounted:function(){
        this.query();
    },
    methods: {
        query: function () {
            utils.ajaxGet(page_params.url_list, this.searchParams, (response, postdata) => {
                if (response.status == 200) {
                    this.chartData = response.data;
                    /*$('#morris-bar-chart').empty();
                    Morris.Bar({
                        element: 'morris-bar-chart',
                        data: this.chartData,
                        xkey: 'ref_date',
                        ykeys: ['new_user', 'cancel_user'],
                        labels: ['新增用户数', '取关用户数'],
                        hideHover: 'auto',
                        resize: true,
                        barColors: ['#1ab394', '#cacaca'],
                    });*/
                }else{
                    this.chartData = [];
                }
            });
            console.log(this.chartData);
            var barData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "Data 1",
                        backgroundColor: 'rgba(220, 220, 220, 0.5)',
                        pointBorderColor: "#fff",
                        data: [65, 59, 80, 81, 56, 55, 40]
                    },
                    {
                        label: "Data 2",
                        backgroundColor: 'rgba(26,179,148,0.5)',
                        borderColor: "rgba(26,179,148,0.7)",
                        pointBackgroundColor: "rgba(26,179,148,1)",
                        pointBorderColor: "#fff",
                        data: [28, 48, 40, 19, 86, 27, 90]
                    }
                ]
            };
            var barOptions = {
                responsive: true
            };
            var ctx2 = document.getElementById("barChart").getContext("2d");
            new Chart(ctx2, {type: 'bar', data: barData, options:barOptions});
        },
    },
    components: {
        VueDatepickerLocal
    },
});